<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v2.0.0
* @link  https://www.bilibili.com/video/av26256249/?p=1
* @link
* @link
* @link  https://www.bootcdn.cn/
* @link  http://mockjs.com/
* @link  http://doc.vue-js.com/
* @link  https://v4.bootcss.com/docs/4.0/getting-started/introduction/
* @link  http://www.fontawesome.com.cn/
* @link https://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->

<html lang="en">

<head>
  <!-- <base href="./"> -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
  <title>学生管理</title>
  <!-- Icons字体图标 CSS-->
  <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
  <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
  <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
  <!-- Main styles for this application-->
  <link href="css/style.css" rel="stylesheet">
  <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
  <style>
    [v-clock] {
      display: none;
    }

    /*任何没有加载好的，都不直接显示插值表达式*/
  </style>
</head>

<body class="app header-fixed aside-menu-fixed ">
  <header class="app-header navbar">
    <a class="navbar-brand" href="#">
      <i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i>学习平台
    </a>
    <ul class="nav navbar-nav d-md-down-none">
      <li class="nav-item px-3">
        <a class="nav-link" href="#">工作台</a>
      </li>
      <li class="nav-item px-3">
        <a class="nav-link" href="#">课程管理</a>
      </li>
      <li class="nav-item px-3">
        <a class="nav-link" href="#">设置</a>
      </li>
    </ul>
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item d-md-down-none">
        <a class="nav-link" href="#">
          <i class="icon-bell"></i>
          <span class="badge badge-pill badge-danger">6</span>
        </a>
      </li>
      <li class="nav-item d-md-down-none">
        <a class="nav-link" href="#">
          <i class="icon-list"></i>
        </a>
      </li>
      <li class="nav-item d-md-down-none">
        <a class="nav-link" href="#">
          <i class="icon-location-pin"></i>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <div class="dropdown-header text-center">
            <strong>Account</strong>
          </div>
          <a class="dropdown-item" href="#">
            <i class="fa fa-bell-o"></i> Updates
            <span class="badge badge-info">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-envelope-o"></i> Messages
            <span class="badge badge-success">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-tasks"></i> Tasks
            <span class="badge badge-danger">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-comments"></i> Comments
            <span class="badge badge-warning">42</span>
          </a>
          <div class="dropdown-header text-center">
            <strong>Settings</strong>
          </div>
          <a class="dropdown-item" href="#">
            <i class="fa fa-user"></i> Profile</a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-wrench"></i> Settings</a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-usd"></i> Payments
            <span class="badge badge-secondary">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-file"></i> Projects
            <span class="badge badge-primary">42</span>
          </a>
          <div class="divider"></div>
          <a class="dropdown-item" href="#">
            <i class="fa fa-shield"></i> Lock Account</a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-lock"></i> Logout</a>
        </div>
      </li>
    </ul>
    <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
      <span class="navbar-toggler-icon"></span>
    </button>
    <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
      <span class="navbar-toggler-icon"></span>
    </button>
  </header>
  <div class="app-body">
    <main class="main">
      <!-- 头部管理-->
      <ol class="breadcrumb">
        <li class="breadcrumb-item">首页</li>
        <li class="breadcrumb-item active">用户管理</li>
        <li class="breadcrumb-item active"><a href="http://127.0.0.1:5500/text1.html">返回登录UI</a></li>
        <!-- Breadcrumb Menu-->
      </ol>
      <div class="container-fluid">
        <!--指定插值不闪烁的控件-->
        <div class="animated fadeIn" id="itemsTemplate" v-cloak>
          <!-- <p v-cloak>{{msg}}</p> -->
          <div class="card">
            <!--卡片头部-->
            <div class="card-header">
              <i class="icon-people" aria-hidden="true"></i>信息管理
              <div class="card-header-actions">
                <a class="card-header-action btn-setting" @click="addBox()" href="#">
                  <i class="icon-plus"> 新增</i>
                </a>
                <a class="card-header-action btn-close" data-toggle="modal" data-target="#multipleModal" href="#">
                  <i class="icon-trash" aria-hidden="true"> 删除</i>
                </a>

              </div>
            </div>
            <div class="card-body collapse show" id="collapseExample" v-clock>
              <!--表单-->
              <table class="table table-responsive-sm table-bordered table-striped">
                <thead>
                  <tr>
                    <!-- click 与 change 的区别，前者先传值再操作，或者先操作再传值 -->
                    <th><input type="checkbox" v-model="checkall" @change="checkAll" /> 全选</th>
                    <th>用户名</th>
                    <th>注册时间</th>
                    <th>角色</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in pageItems">
                    <td><input type="checkbox" v-model="item.select" @change="checkOne" /> {{item.id}}</td>
                    <td @click="edit(index)" contenteditable="false">{{item.name}}</td>
                    <td @click="edit(index)" contenteditable="false">{{item.registerDate}}</td>
                    <td @click="edit(index)" contenteditable="false">{{item.role}}</td>
                    <td @click="edit(index)">
                      <span v-if="item.status==='激活'" class="badge badge-success">{{item.status}}</span>
                      <span v-if="item.status==='禁用'" class="badge badge-danger">{{item.status}}</span>
                    </td>
                    <td>
                      <button class="btn btn-primary" type="button" @click="edit(index)"><i class="icon-note"></i>
                        编辑</button>
                      <button class="btn btn-danger" type="button" v-on:click="confirmDel(index)"><i
                          class="fa fa-trash-o fa-lg"></i>
                        删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- 翻页 -->
              <div>
                <template>
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="#" v-on:click="PrePage()">Prev</a>
                    </li>
                    <!-- v-bind:以动态地切换 class  如果页码page的值等于当前页数pageIndex的值+1，则动态切换切换class active-->
                    <li class="page-item" v-for="page in pageCount" v-bind:class="page==pageIndex+1 ? 'active' : ''">
                      <a class="page-link" href="#" v-on:click="pageIndex = page-1">{{page}}</a>
                    </li>

                    <li class="page-item">
                      <a class="page-link" href="#" v-on:click="NextPage()">Next</a>
                    </li>
                  </ul>
                </template>
              </div>
            </div>
          </div>
          <!-- Modal删除 -->
          <div class="modal fade" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog modal-danger" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">危险</h5>
                  <button class="close" type="button" @click="off" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>记录删除后将无法恢复！确定要删除吗？</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-danger" type="button" v-on:click="del()">确认</button>
                  <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal多项删除 -->
          <div class="modal fade" id="multipleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog modal-danger" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">危险</h5>
                  <button class="close" type="button" @click="off" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>记录删除后将无法恢复！确定要删除吗？</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-danger" type="button" @click="multipleDel">确认</button>
                  <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal删除成功 -->
          <div class="modal fade show" id="successModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog modal-success" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">成功</h5>
                  <button class="close" type="button" v-on:click="off" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>删除成功!</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-success" type="button" @click="off">确定</button>
                </div>
              </div>
              <!-- /.modal-content-->
            </div>
            <!-- /.modal-dialog-->
          </div>
          <!-- Modal删除失败 -->
          <div class="modal fade show" id="defeatedModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog modal-warning" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">警告</h5>
                  <button class="close" type="button" v-on:click="off" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>删除失败!</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-warning" type="button" @click="off">确定</button>
                </div>
              </div>
              <!-- /.modal-content-->
            </div>
            <!-- /.modal-dialog-->
          </div>
          <!-- Modal编辑 -->
          <div class="modal fade" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog  modal-primary" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">编辑</h5>
                  <button class="close" type="button" @click='off' aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <form class="needs-validation" action="" method="post" enctype="multipart/form-data">
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label" for="text-input">用户名</label>
                      <div class="col-md-9">
                        <input class="form-control" id="text-input" type="text" name="text-input" placeholder="用户名"
                          v-model.lazy="editItems.name"
                          pattern="^[\u4e00-\u9fa5·A-Za-z][\u4E00-\u9FA5·A-Za-z0-9-_\s]{1,15}$" required>
                        <div class="invalid-feedback">
                          用户名必须2到16位中英文、首位必须是中英文，(字母，数字，下划线，减号)
                          <!-- pattern="^([\u4e00-\u9fa5·A-Za-z][\u4e00-\u9fa5·A-Za-z0-9-_]{1,10})$" -->
                        </div>
                        <!-- <span class="help-block">用户名必须2到16位中英文(字母，数字，下划线，减号)</span> -->
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label" for="email-input">注册时间</label>
                      <div class="col-md-9">
                        <input class="form-control" id="1" type="text" name="disabled-input" placeholder="年 -月-日 --:--"
                          disabled="" v-model.lazy="editItems.registerDate"></div>
                    </div>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label" for="password-input">角色</label>
                      <div class="col-md-9">
                        <select class="custom-select" v-model.lazy="editItems.role">
                          <option selected>教师</option>
                          <option>学生</option>
                        </select>
                        <!-- <span>{{ selected1 }}</span> -->
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label">状态</label>
                      <div class="col-md-9 col-form-label">
                        <div class="form-check form-check-inline mr-1">
                          <input class="form-check-input" id="inline-radio1" type="radio"
                            v-model.lazy="editItems.status" value="激活">
                          <label class="form-check-label" for="inline-radio1">激活</label>
                        </div>
                        <div class="form-check form-check-inline mr-1">
                          <input class="form-check-input" type="radio" v-model.lazy="editItems.status" value="禁用">
                          <label class="form-check-label" for="inline-radio2">禁用</label>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary" type="button" @click="editSubmit">保存</button>
                  <button class="btn btn-secondary" type="button" @click='off'>取消</button>
                </div>
              </div>
              <!-- /.modal-content-->
            </div>
            <!-- /.modal-dialog-->
          </div>
          <!-- Modal添加 data-backdrop="static"禁止点击外面触发关闭-->
          <div class="modal fade show" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog modal-dialog-centered modal-primary" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">新增</h5>
                  <button class="close" type="button" v-on:click="off" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <form class="validation" novalidate>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label" for="text-input">用户名</label>
                      <div class="col-md-9">
                        <input class="form-control" id="text-input" type="text" name="text-input" placeholder="用户名"
                          v-model="newItems.name" pattern="^[\u4e00-\u9fa5·A-Za-z][\u4E00-\u9FA5·A-Za-z0-9-_\s]{1,15}$"
                          required>
                        <div class="invalid-feedback">
                          用户名必须2到16位中英文、首位必须是中英文，(字母，数字，下划线，减号)
                        </div>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label" for="email-input">注册时间</label>
                      <div class="col-md-9" id="itemstime">
                        <input class="form-control" id="1" type="text" name="disabled-input" placeholder="年 -月-日 --:--"
                          disabled="" v-model="newItems.registerDate" value=""></div>
                    </div>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label" for="password-input">角色</label>
                      <div class="col-md-9">
                        <select class="custom-select" v-model="newItems.role">
                          <option selected>教师</option>
                          <option>学生</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label">状态</label>
                      <div class="col-md-9 col-form-label">
                        <div class="form-check form-check-inline mr-1">
                          <input class="form-check-input" id="inline-radio1" type="radio" v-model="newItems.status"
                            value="激活">
                          <label class="form-check-label" for="inline-radio1">激活</label>
                        </div>
                        <div class="form-check form-check-inline mr-1">
                          <input class="form-check-input" type="radio" v-model="newItems.status" value="禁用">
                          <label class="form-check-label" for="inline-radio2">禁用</label>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary" type="button" v-on:click="add">保存</button>
                  <button class="btn btn-secondary" type="button" v-on:click="off">取消</button>
                </div>
              </div>
              <!-- /.modal-content-->
            </div>
            <!-- /.modal-dialog-->
          </div>
        </div>

      </div>
    </main>
  </div>

  <footer class="app-footer">
    <div>
      <a href="http://127.0.0.1:5500/index.html">CoreUI</a>
      <span>&copy; 2018 creativeLabs.</span>
    </div>
    <div class="ml-auto">
      <span>Powered by</span>
      <a href="http://127.0.0.1:5500/index.html">CoreUI</a>
    </div>
  </footer>
  <!-- CoreUI and necessary plugins-->
  <script src="vendors/jquery/js/jquery.min.js"></script>
  <script src="vendors/popper.js/js/popper.min.js"></script>
  <script src="vendors/bootstrap/js/bootstrap.min.js"></script>
  <script src="vendors/pace-progress/js/pace.min.js"></script>
  <script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
  <script src="vendors/@coreui/coreui/js/coreui.min.js"></script>
  <script src="js/main.js"></script>
  <script src="vendors/mock/mock-min.js"></script>
  <script src="vendors/vue/vue.js"></script>
  <script src="vendors/moment/moment-with-locales.js"></script>
  <!-- 获取数据 -->
  <script>
    var items = [];
    var app;
    var delcount = 0;
    $(function () {
      //使用Mock.js库，模拟一个api数据访问接口
      //api的访问地址为：http://127.0.0.1:5500/hs
      Mock.mock("http://127.0.0.1:8080/users", {
        'data|30-90': [{
          id: "@increment()",
          'name|1': ["@name", "@cname"],
          'role|1': ["教师", "学生"],
          registerDate: "@datetime()",
          'status|1': ["激活", "禁用"],
        }],
        success: true,
        code: 200,
        msg: "Success"
      });
      //使用jQuery提供的getJSON方法，向服务器发送一个请求
      //返回的结果由第二个参数的function处理
      $.getJSON("/users", function (response) {
        items = response;
        var i;
        for (i = 0; i < items.length; i++) {
          items[i].select = false;
        }
        //使用vue.js框架，将response.data数据填充到itemsTemplate模板
        app = new Vue({
          el: '#itemsTemplate',
          data: {
            items: items,

            //添加临时数组对象
            newItems: '',
            //编辑临时数组对象
            editItems: {
              id: '',
              name: '',
              role: '',
              registerDate: '',
              status: '',
            },
            index: -1,
            editIndex: -1,
            delIndex: -1,
            checkall: false, // 正在进行中的数据是否被选中
            // pagesize: 10, //一页加载数据
            // curpage: 1, //当前页的页码
            pageSize: 5, //一页加载数据
            pageIndex: 0, //当前页面
            total: items.length, //总数据

          },
          computed: {
            // 计算属性的 getter
            pageItems: function () {
              // this.editIndex=(index+1)*pageIndex;
              var startIndex = this.pageIndex * this.pageSize; //当前页面首条数据编号
              var endIndex = startIndex + this.pageSize - 1; //当前页面的最后一条数据编号
              return this.items.filter(function (value, index) {
                return (
                  index >= startIndex &&
                  index <= endIndex
                );
              });
            },
            pageCount: function () {
              var pageCount = Math.ceil(this.items.length / this.pageSize); //总页数
              return pageCount;
            }
          },
          watch: {

            pageCount: function () {
              if (this.pageIndex == this.pageCount) {
                this.pageIndex = this.pageIndex - 1;

              }
              if (items.length <= this.pageSize) {
                this.pageIndex = 0;

              }
            }
          },
          // 在 `methods` 对象中定义方法
          methods: {
            //上一页
            PrePage: function () {
              if (this.pageIndex > 0) {
                this.pageIndex -= 1;
              }
            },
            // 下一页
            NextPage: function () {
              if (this.pageIndex < this.pageCount - 1) {
                this.pageIndex += 1;
              }
            },
            confirmDel: function (index) {
              $('#dangerModal').modal('show');
              // index = i;
              this.delIndex = index;
            },
            del: function () {
              $('#dangerModal').modal('hide');
              $('#successModal').modal('show');
              $.post("/users/delete?id=" + this.items[this.delIndex].id,
                function (data, status) {
                  //alert("数据: \n" + data + "\n状态: " + status);
                });
              this.items.splice(this.delIndex, 1);
              delcount++;
            },
            //多项删除
            multipleDel: function () {
              $('#multipleModal').modal('hide');
              var flag = 0;
              for (var i = 0; i < this.items.length; i++) {
                if (this.items[i].select) {
                  // alert(this.items[i].id)
                  $.get("/users/delete?id=" + this.items[i].id,
                    function (data, status) {
                      //alert("数据: \n" + data + "\n状态: " + status);
                    });
                  this.items.splice(i, 1);
                  delcount++;
                  i--;
                  flag = 1;
                }
              }
              if (flag === 1) {
                $('#successModal').modal('show');
                flag = 0;
              } else {
                $('#defeatedModal').modal('show');
              }
              this.pageIndex = 0;
              // alert(curpage);
            },
            // 添加
            addBox: function () {
              var form = document.getElementsByClassName('validation')[
                0];
              form.classList.remove('was-validated');
              $('#addModal').modal('show');
              var idd;
              if (items.length == 0) {
                idd = 1;
              } else {
                idd = items[items.length - 1].id + 1;
              }
              this.newItems = {
                id: idd, //id自动+1
                name: '',
                role: '学生', //默认为学生
                registerDate: itemstime,
                status: '激活', //默认为禁用状态
              };
            },
            //添加保存
            add: function () {
              var form = document.getElementsByClassName('validation')[
                0];
              if (form.checkValidity() === true) {
                //插入到items中
                this.items.push(this.newItems);
                $.post("/users/create", {
                    id: this.newItems.id,
                    name: this.newItems.name,
                    role: this.newItems.role,
                    registerDate: this.newItems.registerDate,
                    status: this.newItems.status
                  },
                  function (data, status) {
                    //alert("数据: \n" + data + "\n状态: " + status);
                  });
                //Vue.set(this.items, this.items.length, this.newItems);

                $('#addModal').modal('hide');
              };
              form.classList.add('was-validated');

            },
            //取消、关闭模态框
            off: function () {
              $('#addModal').modal('hide');
              $('#primaryModal').modal('hide');
              $('#dangerModal').modal('hide');
              $('#multipleDel').modal('hide');
              $('#successModal').modal('hide');
              $('#defeatedModal').modal('hide');
            },
            //编辑
            edit: function (index) {
              var form = document.getElementsByClassName('needs-validation')[
                0];
              form.classList.remove('was-validated');
              this.editIndex = this.pageIndex * this.pageSize + index;
              this.editItems = JSON.parse(JSON.stringify(this.items[this.editIndex]));
              $('#primaryModal').modal('show');
            },
            //编辑后保存
            editSubmit: function () {
              var form = document.getElementsByClassName('needs-validation')[
                0];
              if (form.checkValidity() === true) {
                Vue.set(this.items, this.editIndex, this.editItems);
                $.post("/users/update", {
                    id: this.editItems.id,
                    name: this.editItems.name,
                    role: this.editItems.role,
                    registerDate: this.editItems.registerDate,
                    status: this.editItems.status
                  },
                  function (data, status) {
                    //alert("数据: \n" + data + "\n状态: " + status);
                  });
                $('#primaryModal').modal('hide');
              };
              form.classList.add('was-validated');
            },
            // 用户全选
            checkAll() {
              // alert(1)
              for (var i = 0; i < this.items.length; i++) {
                this.items[i].select = this.checkall;
              }
              // this.items.forEach(items => items.select = this.checkall);
              // alert(this.checkall);
            },
            //用户单选
            checkOne() {

              this.checkall = this.items.every(items => items.select);
              // alert(this.checkall)
            },




          },
        });
        return;
      });
    });
  </script>

  <!-- 获取系统当前时间 -->
  <script type="text/javascript">
    window.setInterval("showtime()");

    function showtime() {
      var date = new Date();
      var s1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      var hh = date.getHours();
      var mi = date.getMinutes();
      var ss = date.getSeconds();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      if (hh >= 0 && hh <= 9) {
        hh = "0" + hh;
      }
      if (mi >= 0 && mi <= 9) {
        mi = "0" + mi;
      }
      if (ss >= 0 && ss <= 9) {
        hh = "0" + hh;
      }
      itemstime = year + s1 + month + s1 + strDate + " " + hh + ":" + mi +
        ":" + ss +
        " ";
      return itemstime;
    }
  </script>
</body>

</html>